<!DOCTYPE html>
<html>

{include file='public/header'}
<style>
    td .layui-table-cell {
        height: auto;
        line-height: 30px;
        /* height: 120px; */
        text-align: left;
    }
    .layui-table img {
        max-width: 100%;
    }
    .layer-photos{
        cursor:pointer;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:void(0)">首页</a>
            <a href="javascript:void(0)">短剧推广</a>
            <a><cite>短剧中心</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <div class="layui-row">
            <form class="layui-form">
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">短剧ID：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="id" placeholder="请输入短剧ID" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label w-auto">短剧名称：</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" placeholder="请输入短剧名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <button class="layui-btn" style="margin-left: 10px;" lay-submit lay-filter="searchList">搜索</button>
                <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
            </form>
        </div>
        <table id="link" lay-filter="link"></table>
    </div>
    <script type="text/html" id="tbBar">
        <a class="layui-btn layui-btn-xs" lay-event="look">推广链接</a>
        <a class="layui-btn layui-btn-xs" lay-event="show">查看详情</a>

        <!-- if(is_distributor === 0 && !pid){
            return `
            <a class="layui-btn layui-btn-xs" lay-event="look">推广链接</a>
            <a class="layui-btn layui-btn-xs" lay-event="show">查看详情</a>`
        }else{
            return `
            <a class="layui-btn
             layui-btn-xs" lay-event="look">推广链接</a>
            `
        } -->
    </script>
    <script>
        let params = {
            elem: '#link'
            , toolbar: false
            , url: '/cps/video/list' //数据接口
            , id: 'link'
            , page: true
            , limit: 15
            , cols: [[ //表头
                {
                    field: 'id', title: 'ID', width: 180, sort: true, align: 'center', templet: function (d) {
                        if (d.is_copy == 1) {
                            return `<div style='text-align:center'>${d.id} <span class="layui-badge">复</span> <span class="layui-badge" style='background-color:#eee;color:#ccc'>原：${d.original_id}</span></div>`
                        } else {
                            return `<div style='text-align:center'>${d.id}</div>`
                        }

                    }
                }
                , {
                    field: 'cover_img', title: '封面图片', align: 'center', width: 110, templet: function (d) {
                        if (d.cover_img) {
                            return `<div class="layer-photos">
                                    <img onclick="showimg(this)" style="max-height: 100%;vertical-align: top;" src=`+ d.cover_img + ` alt="">
                                </div>`;
                        } else {
                            return `<div>暂无照片</div>`
                        }
                    }, align: 'center'
                }
                , { title: '短剧信息', templet: function (d){
                    return `
                        <div>名称：${d.name}</div>
                        <div>总集数：${d.sylloge}</div>
                        <div>是否上架：${d.is_shelves == 1 ? '是' : '否'}</div>
                    `
                } }
                , { title: '短剧数据', templet: function (d){
                        return `
                            <div>累计消耗（K币）：${d.total_consume}</div>
                            <div>播放次数：${d.frequency}</div>
                            <div>播放人数：${d.number}</div>
                        `
                    } 
                }
                , { title: '短剧默认数据', templet: function (d){
                        return `
                            <div>开始收费剧集：${d.sort}</div>
                            <div>每集收取K币：${d.pay_amount}</div>
                        `
                    } 
                }
                , {
                    field: 'launch_start_time', title: '投放时间',  templet(d) {
                        return dayjsFormat(d.launch_start_time)
                    }
                }
                , { toolbar: '#tbBar', title: '操作', align: 'center', width: 200 }

            ]]
        }

        tableList(params)

        layui.use('table', function () {
            var table = layui.table;
            table.on('tool(link)', function (obj) {
                var event = obj.event;
                if (event === 'look') {
                    x_admin_show('推广链接', `./info.html?id=${obj.data.id}&video_name=${encodeURI(obj.data.name)}&cover_img=${obj.data.cover_img}&synopsis=${obj.data.synopsis}`, 1200, 700, null);
                } else if (event === 'show') {
                    x_admin_show('查看详情', `./detailInfo.html?id=${obj.data.id}&name=${obj.data.name}`, 1400, 730, null);
                }
            });

        });


    </script>
</body>

</html>